<template>
  <div>
    <el-row>
      <el-col :span="9"><div class="grid-content "></div></el-col>
      <el-col :span="6"><div class="grid-content ">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="left" class="demo-form">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pwd">
            <el-input v-model="form.pwd"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名" prop="realName">
            <el-input v-model="form.realName"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="form.radio" label="男">男</el-radio>
            <el-radio v-model="form.radio" label="女">女</el-radio>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="公司名称" prop="supName">
            <el-input v-model="form.supName"></el-input>
          </el-form-item>
          <el-form-item label="公司产品类型">
            <el-select v-model="typeid" placeholder="请选择"  @change="changeType">
              <el-option
                  v-for="item in options"
                  :key="item.typeid"
                  :label="item.typename"
                  :value="item.typeid">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="资质图片">
            <div>
              <el-upload
                  class="avatar-uploader"
                  action="http://172.16.1.254:8400/file/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>

          </el-form-item>


          <el-form-item>
            <el-button type="primary" @click="onSubmit('form')">立即注册</el-button>
            <el-button @click="goBack">取消</el-button>
          </el-form-item>
        </el-form>
      </div></el-col>
      <el-col :span="9"><div class="grid-content "></div></el-col>
    </el-row>
  </div>
</template>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<script>
export default {
  name: "RegisterView",
  data() {
    return {
      form: {
        name: '',
        realName: '',
        sex: '',
        phone: '',
        type:'',
        pwd:'',
        supName:'',
        radio: '男',
      },
      rules:{
        name:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
        ],
        pwd:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,message: "密码必须是由6-20位字母+数字组合", trigger: "blur" }
        ],
        realName:[
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
        ],
        phone:[
          { required: true, message: '请输入11位手机', trigger: 'blur' },
          { pattern:/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: "请输入合法手机号", trigger: "blur" }
        ],
        supName:[
          { required: true, message: '请输入公司名称', trigger: 'blur' },
          { min: 3, max: 128, message: '长度在 3 到 128 个字符', trigger: 'blur' }
        ],
      },
      options: [],
      value:'',
      label:'',
      typeid:'',
      typename:'',
      dialogImageUrl: '',
      dialogVisible: false,

      imageUrl: '',
      imageUrl2:''
    }

  },
  mounted() {
    this.init();
  },
  methods: {
    handleAvatarSuccess(res, file,response) {
      console.log(res)
      console.log(file.raw)
      this.imageUrl = URL.createObjectURL(file.raw);
      this.imageUrl2 = response[0].response
      console.log(this.imageUrl2)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    init(){
      this.$axios.get("/psc/sup-type/findAllType").then(
          r=>{
            this.options=r.data
            console.log(this.options)
            console.log(r.data)

          }
      )
    },
    changeType(typeid){
      let obj={}
      obj=this.options.find((item)=>{
        return item.typeid==typeid
      });
      this.typename=obj.typename
      console.log(obj.typename)

    },
    goBack(){
      this.$router.push("LoginView")
    },
    onSubmit(formName){
      let fd=new FormData()
      fd.append("username",this.form.name)
      fd.append("password",this.form.pwd)
      fd.append("realname",this.form.realName)
      fd.append("sex",this.form.radio)
      fd.append("phone",this.form.phone)
      fd.append("supname",this.form.supName)
      fd.append("typename",this.typename)
      fd.append("imgurl",this.imageUrl2)

      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
          this.$axios.post("/psc/sys-userinfo/register",fd).then(
              r=>{
                if(r.data){
                  this.$message.info('已注册，等待审核！')
                  this.$router.push("LoginView")
                }else {
                  this.$message.error('注册失败，请检查信息');
                }
              }
          )
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    }
  }
}
</script>
<style scoped>
.el-row {
  margin-bottom: 20px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>